時間過得很快 30 天一下就過了，明天假日再來寫感想~

今天來一支程式只要有瀏覽器就能幾秒內把文章標題&連結 印出markdown語法!

程式碼

const ironmanArticles = [];
const userId = '20114417';
const suffixUrl = '/ironman/5476' || '/articles';
const isReverse = false;
main(userId);

async function main(userId) {
  let markdown = '';
  await handleArticles(userId);

  ironmanArticles.forEach(item => {
    markdown += `[${item.title}](${item.url})\n`;
  })
  console.log(markdown);
}

async function handleArticles(userId) {
  // 寫死打3次 api
  const page1 = await getArticles(userId, 1);
  const page2 = await getArticles(userId, 2);
  const page3 = await getArticles(userId, 3);
  const articles = [...page1, ...page2, ...page3];

  if (isReverse === true) {
    articles.reverse();
  }

  articles.forEach(a => {
    const title = a.innerText.replaceAll('\n', '').trim();
    ironmanArticles.push({ title, url: a.href })
  })
}

function getArticles(userId, page = 1, selector = '.qa-list__title-link') {
  const url = `https://ithelp.ithome.com.tw/users/${userId}${suffixUrl}?page=${page}`
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      const parser = new DOMParser();
      const htmlDocument = parser.parseFromString(text, "text/html");
      const nodes = htmlDocument.documentElement.querySelectorAll(selector);
      return nodes;
    })
    .then(nodes => Array.from(nodes))
}

使用說明

1. 找到文章列表網址記起來等等會用到
   我的是: https://ithelp.ithome.com.tw/users/20114417/ironman/5476?page=1
2. 複製上方程式碼
3. 在該網頁開啟 瀏覽器 開發者工具 (快捷鍵 F12)
4. 貼上程式碼
5. 調整參數

const userId = '20114417'; //輸入個人user帳號
const suffixUrl = '/ironman/5476' //改成個人的後綴，若用'/articles'則是撈取該user所有的文章
const isReverse = false; //是否做顛倒排序

6. 按下Enter，等幾秒鐘

成果

文章總覽

第一天 我存在 第一次把專案跑起來真暢快
第二天 用Synk幫忙檢查套件是否有安全漏洞
第三天 抬頭觀察 由外至內 由淺入深 反覆觀察
第四天 略懂首頁怎麼跑起來的
第五天 研究 vue-pure-admin 全域設定檔
第六天 10分鐘略懂 pinia (vue的共用儲存區)
第七天 盤點 pure-admin-thin 用了哪些套件?
第八天 把喜歡的vue-pure-admin頁面 加到 pure-admin-thin {{實戰}}
第九天 閱讀 pure-admin-table
第十天 略懂 pure-admin 的 Layout 架構
第十一天 實作前後端串接具有權限的路由
第十二天 pure-admin 部署設定
第十三天 研究 v-auth 依照用戶角色渲染元素
第十四天 vure-admin 用了哪些 icon 圖庫?
第十五天 替pure-admin-thin添加vue-pure-admin的註冊和忘記密碼UI
第十六天 整理 vue 相關名詞
第十七天 盤點之後想介紹的主題
第十八天 vue3 的 Option API vs Composition API 範例
第十九天 用 vue 的 v-bind:is 動態渲染組件(dynamic-components) & keep-alive 和 KeepAlive 差異是?
第二十天 vue composables 組合式函數
第二十一 超略懂 vue 自訂義指令 custom-directives
第二十二天 vue 的 app.use(MyPlugin,{}) 實際寫一個 "類i18n plugin"
第二十三天 略懂 vue 的 內建漸變動畫
第二十四天 略懂 vue3 新出的 ，將元素往外傳送
第二十五天 略懂 vue 的
第二十六 pure-admin-thin 的主題設定
第二十七天 pure-admin-thin 前端寫假資料 | vite-plugin-mock
第二十八天 CSS 名詞大亂鬥
第二十九天 替 pure-admin-thin 加入圓餅圖 | echarts

小心得

比較特別的是元素撈標題很特殊，拿到這樣:

"\n                                                            第十天 略懂 pure-admin 的 Layout 架構\n                                                    "

所以先把\n移除再用 trim() 削掉空白